<template>
    <div id='' class='menu_content'>
        <Row :gutter="24" class="ivu-mt">
            <Col :xl="10" :lg="24" :md="24" :sm="24" :xs="24" class="ivu-mb">
            <Affix :offset-top="108">
                <CardDeptTree ref="cardDeptTree" />
            </Affix>
            </Col>
            <Col :xl="14" :lg="24" :md="24" :sm="24" :xs="24" class="ivu-mb">
            <Affix :offset-top="108">
                <component ref="coms" :is="coms" :option="menuOption" />
            </Affix>
            </Col>
        </Row>
        <Drawer :styles="drawer.styles" v-model="drawer.show" :before-close="handleCloseEdit" :transfer="false" width="960">
            <div slot="header" class="ivu-drawer-header-inner">
                <template>添加部门</template>
            </div>
            <AddDepartment :show="drawer.show" ref="AddDepartment" />
        </Drawer>
    </div>
</template>
<script>
import CardDeptTree from "./department/cardDepartmentTree.vue"
import DefaultMenu from './department/defaultDepartment.vue'
import AddDepartment from './department/addDepartment.vue'
import EditMenu from './department/editDepartment.vue'

import { mapState, mapActions } from 'vuex'
export default {
    name: '',
    props: [''],
    data() {
        return {
            coms: DefaultMenu,
            submitting: false,
            menuOption: {
                title: ''
            },
            drawer: {
                show: false,
                type: 'header', // header || sider
                styles: {
                    height: 'calc(100% - 55px)',
                    overflow: 'auto',
                    paddingBottom: '53px',
                    position: 'static'
                }
            },
        };
    },
    provide() {
        return {
            provideClick: this.provideClick,
        }
    },
    components: { CardDeptTree, AddDepartment },
    computed: {
        ...mapState('extend/sysDepartment', ['$row'])
    },
    beforeMount() { },
    mounted() { },
    methods: {
        ...mapActions('extend/sysDepartment', ['setData']),
        // 菜单点击
        provideClick(type, data) {
            let typeHandel = {
                "编辑": () => {
                    this.coms = EditMenu
                    this.$nextTick(() => {
                        this.menuOption['title'] = data.prop[0].name
                        this.$refs.coms.setInit(data.prop[0],'编辑')
                    })
                },
                "新增": () => {
                    this.drawer.show = true
                    this.setData([{
                        key: '$row',
                        value: null
                    }])
                },
                '右键新增': () => {
                    this.drawer.show = true
                    this.$nextTick(() => {
                        this.$refs.AddDepartment.$refs.addForm.setUpMenu()
                    })
                },
                "隐藏新增": () => {
                    this.drawer.show = false
                    this.coms = DefaultMenu
                    this.$refs.cardDeptTree.$refs.myTree.getTree()

                },
                "编辑成功": () => {
                    this.$refs.cardDeptTree.$refs.myTree.getTree()
                },
                "default": () => {
                    this.coms = DefaultMenu
                }
            }
            typeHandel[type] ? typeHandel[type]() : console.log('无效的传值：%o', type)
        },
        // 关闭新增
        handleCloseEdit() {
            return new Promise(resolve => {
                this.$Modal.confirm({
                    title: '关闭确认',
                    content: '您已经编辑了部门信息，是否直接关闭？',
                    onOk: () => {
                        resolve()
                    }
                });
            })
        },
        // 表单提交更新方法
        handleSubmitUpdate() {
            this.$refs.addForm.getForm(() => {
                if (this.$row) {
                    this.drawer.show = false
                    this.coms = DefaultMenu
                    this.$refs.cardDeptTree.$refs.myTree.addNode()
                } else {
                    this.drawer.show = false
                    this.coms = DefaultMenu
                    this.$refs.cardDeptTree.$refs.myTree.getTree()
                }
            })
        },
        // 表单重置方法
        handleResetUpdate() {
            this.$refs.addForm.reset()
        }
    },
    watch: {}
}
</script>
<style lang='less' scoped>
@moduleHeight: 800px;
.menu_content {
    width: 100%;
}
.menu_content .button {
    width: 100%;
    text-align: right;
}
</style>